<template>
<div class="main-contents-box">
  <div class="main-contents-main">
    <div class="environment">
        <div class="temperature">
             <ul class="warter-content">
                <li v-for="items in waters" :style="{left:items.left+'px',top:items.top+'px'}">
                  <temperature :tem-items="items"></temperature>
                </li>
             </ul>
        </div>
        <watersa class="leach-box" :waters-items="items" v-for="items in wartercontetns" :style="{left:items.left+'px',top:items.top+'px'}" :show-content="showContent" ></watersa>
         <airs class="air" :trea="itmes" :show-content="showContent" v-for="itmes in airContent"></airs>
         <precisionAir class="pre-air"  v-for="item in preAir"  :style="{left:item.x+'px',top:item.y+'px'}" :itemsa="item" :alarms="preAlarm[item.deviceid]?preAlarm[item.deviceid]:''" :neab="(preAlarm[item.deviceid]?(preAlarm[item.deviceid].numbersa?preAlarm[item.deviceid].numbersa:0):'')" @on-shows="showDialog">
         </precisionAir>
        <div class="buttons-box">
           <el-button type='primary' @click="edit" size="small">{{btnname}}</el-button>
        </div>
        <backdrop :is-show="isShowRegDialog1"  @on-close="closeDialog('isShowRegDialog1')">
            <preAirpop :staus="preAlarms" :stauss="preAlarmss" :stausss="preAlarmsss" :staussss="preAlarmssss"></preAirpop>
        </backdrop>
    </div>
  </div>
</div>
</template>
<script type="text/javascript">
import airs from "./tem/airs"
import watersa from "./tem/waters"
import temperature from "./tem/temperature"
import precisionAir from "./tem/precisionAir"
import backdrop from  "../Monitornr/tem/backdrop.vue"
import preAirpop from  "../Monitornr/tem/preAirpop.vue"
export default {
  name: 'environment',
  components:{
    airs,
    watersa,
    temperature,
    precisionAir,
    preAirpop,
    backdrop,
  },
  data () {
    return {
      isShowRegDialog1:false,
      preAir:[],
      preStatus:1,
      preAlarm:[],
      preAlarms:[],
      preAlarmss:[],
      preAlarmsss:[],
      preAlarmssss:[],
      water:true,
      states:false,
      waters:[
        {
          tem:13,
          humidity:25,
          left:0,
          top:0,
          name:'温湿度1',
          id:1
        },
        {
          tem:13,
          humidity:25,
          left:0,
          top:0,
          name:'温湿度2',
          id:2
        }
      ],
      value:'1',
      btnname:'编辑',
      showContent:false,
      wartercontetns:[{
          value: '2',
          name:'水侵',
          left:0,
          top:0
      },{
          value: '1',
          name:'水侵',
          left:0,
          top:0
      }],
      startwart:[],
      airContent:[{
          name:"空调123",
          cold:27,
        dehumidify:27,
          left:0,
          top:0,
          value:0
        },{
          name:"空调456",
          cold:20,
        dehumidify:20,
          left:100,
          top:200,
          value:1
        }
      ]
    }
  },
  methods:{
    edit(){
      this.$data.states=!this.$data.states;
      let that=this;
      if(this.$data.states){
        $(".temperature .warter-content li ").draggable( "enable" );
        $(".leach-box").draggable( "enable" );
        $(".pre-air").draggable("enable");
        $(".air").draggable( "enable" );
        this.$data.btnname='保存';
        this.$data.showContent=true;
        this.$data.a=this.$data.wartercontetns;
      }else{
        $(".temperature .warter-content li ").draggable( "disable" );
        $(".leach-box").draggable( "disable" );
        $(".pre-air").draggable("disable");
        $(".air").draggable( "enable" );
        // $(".pre-air").draggable("disable");
        this.$data.btnname='编辑';
        this.$data.showContent=false;
        $.each(this.$data.wartercontetns,function(i,value){
            let thats=this
            $.each(that.$data.options,function(n,value){
              if(this.value==thats.value){
                  thats.name=this.name
              }
            })
        });
          //点击保存，水浸的各项数据以及位置信息；
      }
    },
    /*精密空调获取位置信息*/
    get_status(){
        let that=this;
        this.$ajax.get("../../../static/nair.json",{"cmd":"CGI_MONITOR_GET_ENV","sensorlist":["精密空调id"]}).then(function(res){
              that.$data.preAir=res.data;
          });
    },
    /*精密空调获取实时数据*/
    get_info(){
        let that=this;
        this.$ajax.get("../../../static/get_nair.json").then(function (res) {
            $.each(res.data,function(i,value){
                let ii = 0;
                $.each(value,function(n,val){
                     if(val === 0){
                          ii ++;
                     }
                })
                that.$set(res.data[i],"numbersa",ii)
            })
            that.$data.preAlarm=res.data;
            console.log(res.data);
            console.log(that.$data.preAlarm)
            console.log(that.$data.preAlarm["123"].numbersa)
        })
    },
    showDialog(a){
      this.$data.isShowRegDialog1=true;
      let abc=new Array();
      let abcd=new Array();
      let abcde=new Array();
      let abcdef=new Array();
      for ( var i in this.$data.preAlarm[a]){
        abc.push(this.$data.preAlarm[a][i]);
        abcd.push(this.$data.preAlarm[a][i]);
        abcde.push(this.$data.preAlarm[a][i]);
        abcdef.push(this.$data.preAlarm[a][i]);
      }
      abc=abc.splice(3,7);
      abcd=abcd.splice(10,7);
      abcde=abcde.splice(17,7);
      abcdef=abcdef.splice(24,7);
      this.$data.preAlarms=abc;
      this.$data.preAlarmss=abcd;
      this.$data.preAlarmsss=abcde;
      this.$data.preAlarmssss=abcdef;
    },
    closeDialog(){
      this.$data.isShowRegDialog1 = false;
    },
    moves(){
          let that=this;
          let lefts='';
          let tops='';
          $(".temperature .warter-content li ").draggable({
            containment: "parent",
            stop: function () {
               lefts=parseInt($(this).css("left"));
               tops=parseInt($(this).css("top"));
               let isid=$(this).children('.isid').text()
                $.each(that.$data.waters,function(i,value){
                    if(this.id==isid){
                        this.left=lefts;
                        this.top=tops;
                    }
               })
            }
          });
          $(".temperature .warter-content li ").draggable( "disable" );
          $(".leach-box").draggable({
            containment: "parent",
            stop: function () {
              //停止拖动后获取当前位置、、使用ajax储存位置信息;
              lefts=parseInt($(this).css("left"));
              tops=parseInt($(this).css("top"));
              let numbers=$(this).find('input').val()
              $.each(that.$data.wartercontetns,function(i,value){
                  if(this.value==numbers){
                      this.right=lefts;
                      this.top=tops;
                  }
              })
            }
          });
          $(".leach-box").draggable("disable");
          $(".air").draggable({
            containment: "parent",
            stop: function () {
              //停止拖动后获取当前位置、、使用ajax储存位置信息;
              lefts=parseInt($(this).css("left"));
              tops=parseInt($(this).css("top"));
              let name=$(this).children('.air-header').text();
              $.each(that.$data.airContent,function(i,value){
                  if(this.name==name){
                      this.left=lefts;
                      this.top=tops;
                  }
              })
            }
          });
          $(".air").draggable("disable");
          $(".pre-air").draggable({
            containment: "parent",
            stop: function () {
              lefts=parseInt($(this).css("left"));
              tops=parseInt($(this).css("top"));
              let preid=$(this).children('.predid').text();
              alert(preid)
              $.each(that.$data.preAir,function(i,value){
                  if(value.ids==preid){
                      value.left=lefts;
                      value.top=tops;
                  }
              })
            }
          });
          $(".pre-air").draggable("disable");
    }
  },
  mounted(){
    this.get_status();
    this.get_info();
  },
  created(){
      setTimeout(this.moves,500);
  }
}

</script>
<style>
  .environment{
    width: 800px;
    height: 500px;
    margin: auto;
    margin-top: 5%;
    /*background: url(../../assets/hw2.png) center no-repeat;*/
    background: url(../../assets/1.png) 100% no-repeat;
    position: relative;
/*    padding-top: 2%;*/
    min-width: 800px;
  }
  .water-main{
    width: 420px;
    height: 110px;
    position: absolute;
    left:375px;
    top:62px;
    left: 265px;
    top: 230px;
  }
  .water-main img{
    width:420px;
    height: 110px;
  }
  .temperature{
    width:98%;
    height: 100%;
    margin-top: -1.5%;
    position: relative;
  }
  .buttons-box{
    width: 100px;
    height: 40px;
    position: fixed;
    right: 50px;
    top:100px;
    text-align: center;
    line-height: 40px;
  }
  .buttons-box .el-button{
    width: 80px;
    font-size: 15px;
    letter-spacing: 2px;
    height: 30px;
    line-height: 30px;
    padding:0px;
  }
  .leach-box{
    width: 120px;
    position: absolute;
    height: auto;
    right: 100px;
    top: 100px;
    background: #fff;
    text-align: center;
    cursor: move;
    overflow: hidden;
  }
  .leach-box-header{
    background: #0080c0;
    color: #fff;
    height:25px;
    line-height: 25px;
    letter-spacing: 1px;
  }
  .leach-box-content{
    overflow: hidden;
    padding-top: 8px;
    overflow: hidden;
    padding-bottom: 8px;
  }
  .leach-box-content .el-select{
    width: 60px;
  }
  .el-popper[x-placement^=bottom] .popper__arrow{
    display: none;
  }
  .leach-box-title{
    float: left;
    width: 60px;
    height: 40px;
    line-height: 40px;
  }
  .leach-box .leach-box-mian{
    width: 60px;
    float: left;
    height: 40px;
    line-height: 40px;
  }
  .temperature ul{
    width: 100%;
    height: 100%;
  }
  .temperature ul li{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 90px;
    height: 80px;
    background: #269AD5;
    cursor: move
  }
  .temperature ul li h4{
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background: #0080c0;
  }
  .temperature ul li p{
    width:auto;
    height: 20px;
    margin:auto;
    padding: 0px;
    overflow: hidden;
    margin-top: 6px;
    text-align: center;

  }
  .temperature ul li p i{
    display: block;
    float: left;
    width: 15px;
    height: 20px;
    margin: 0px 5px;
  }
  .tem{
     background: url(../../assets/shidu.png) center no-repeat;
  }
  .humidity{
     background: url(../../assets/wendu.png) center no-repeat;
  }
  .temperature ul li p span{
      display: block;
      float: left;
      color: #fff;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      width: 55px;
      text-align:center;
  }
  .air{
    width: 180px;
    position: absolute;
    height: auto;
    left: 0px;
    top: 0px;
    background: #fff;
    text-align: center;
    cursor: move;
    overflow: hidden;
  }
  .air .air-header{
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: #0080C0;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
  }
  .air .air-content ul{
    width: 100%;
    height: 100%;
    padding-bottom: 8px;
  }
  .air .air-content ul li{
    height: 30px;
    line-height: 30px;
   padding: 2px 0px;
  }
  .air-name{
    width: 50px;
    height: 100%;
    float: left;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 3px;
  }
  .air-main{
    float: left;
    width: 130px;
    height: 30px;
    line-height: 30px;
    margin-top: 3px;
  }
  .air-main .el-select{
    width:60px;
    float: left;
  }
   .air-main .el-button{
    float: left;
    margin-left: 5px;
   }
  .pre-air{
  width: 150px;
  background: #fff;
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  cursor: move;
}
.pre-air-header{
  width: 100%;
  height: 25px;
  background: #0080c0;
  line-height: 25px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.pre-air-content{
  width: 100%;
  height: auto;
  padding-bottom: 5px;
}
.pre-air-content ul li{
  width: 100%;
  font-size: 12px;
  letter-spacing: 1px;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.pre-air-name{
  width: 70px;
  text-align: right;
  height: 25px;
  line-height: 25px;
  float: left;
}
.pre-air-data{
  float: left;
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.pre-active{
  font-weight: 600;
  width: 40px;
  color: red;
}
.pre-air-more{
  cursor: pointer;
}
.pre-air-more:hover{
  color:red;
}
</style>
